<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ user.nickname if user else '用户主页' }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            color: #333;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
            padding-bottom: 60px; /* 为底部页脚留出空间 */
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            gap: 20px;
             
        }
        .left-sidebar {
            width: 20%;
            background: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .main-content {
            width: 50%;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .right-sidebar {
            width: 30%;
            background: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .blog-title {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .category-list {
            list-style-type: none;
            padding-left: 0;
        }
        .category-list li {
            margin-bottom: 8px;
            padding: 8px 10px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
        .category-list li:hover {
            background-color: #f9f9f9;
        }
        .article-item {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .article-item h3 {
            color: #2a6496;
            margin-top: 0;
            font-size: 1.2em;
        }
        .article-meta {
            color: #999;
            font-size: 0.85em;
            margin: 8px 0;
        }
        .article-content {
            line-height: 1.6;
            font-size: 0.95em;
        }
        .hot-article {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #eee;
        }
        .hot-article h4 {
            color: #2a6496;
            margin-top: 0;
            font-size: 1.1em;
        }
        .section-title {
            border-bottom: 1px solid #eee;
            padding-bottom: 8px;
            margin-bottom: 15px;
            color: black;
            font-size: 2em;
        }
        .footer {
            text-align: center;
            padding: 10px 0;
            background-color: #333;
            color: #fff;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        .read-count {
            color: #666;
            font-size: 0.8em;
            margin-top: 5px;
        }
        .popular-authors {
            margin-top: 20px;
        }
        .popular-authors li {
            padding: 8px 10px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
        .popular-authors li:hover {
            background-color: #f9f9f9;
        }

       
   
    .navbar-default {
        background-color: #333;
        height: 80px; /* 调整导航栏高度 */
        display: flex; /* 使用 Flex 布局 */
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        margin-bottom: 20px; /* 与下方内容的间距 */
    }
    
    .navbar-brand {
        color: white !important; /* 确保文字颜色为白色 */
        font-size: 24px; /* 增大字体 */
        padding: 0; /* 移除默认 padding */
        line-height: 1; /* 防止行高影响垂直居中 */
    }

    </style>
</head>
<body>
    <!-- <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand brand-link" href="/blog" style="color:white">博客——"{{ user.nickname if user else '用户' }}"的主页</a>
            </div>
        </div>
    </nav> -->

    <nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header" style="width: 100%; text-align: center;">
            <a class="navbar-brand brand-link" href="/blog" style="color:white; float: none; display: inline-block;">迷你博客——"{{ user.nickname if user else '用户' }}"的主页</a>
        </div>
    </div>
</nav>


    <div class="container">
        <!-- 左侧边栏 - 博文分类和热门博主 -->
        <div class="left-sidebar">
            <h1 class="section-title">博文分类</h1>
            <ul class="category-list">
                {% if categories %}
                    {% for category in categories %}
                    <li>{{ category.name }}</li>
                    {% endfor %}
                {% else %}
                    <li>暂无分类</li>
                {% endif %}
            </ul>
            
            
        </div>

        <!-- 主内容 - 博文列表 -->
        <div class="main-content">
            
            <h1 class="section-title">博文列表</h1>
            {% if articles %}
                {% for article in articles %}
                <div class="article-item">
                    <h3>{{ article.title }}</h3>
                    <p class="article-meta">
                        发表于: {{ article.create_date.strftime('%Y-%m-%d %H:%M:%S') if article.create_date else '未知时间' }}
                        {% if article.category_name %} | 分类: {{ article.category_name }}{% endif %}
                    </p>
                    <div class="article-content">
                        <p>{{ article.content[:150] if article.content else '无内容' }}...</p>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <p>暂无博文</p>
            {% endif %}
        </div>

        <!-- 右侧边栏 - 热门博文 -->
        <div class="right-sidebar">
            <h1 class="section-title">热门博文</h1>
            <div class="hot-articles">
                {% if hot_articles %}
                    {% for article in hot_articles %}
                    <div class="hot-article">
                        <h4>{{ article.title }}</h4>
                        <p class="read-count">阅读量: {{ article.reads if article.reads else 0 }}</p>
                        <div class="article-content">
                            <p>{{ article.content[:100] if article.content else '无内容' }}...</p>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <p>暂无热门博文</p>
                {% endif %}
            </div>
        </div>
    </div>

    <footer class="footer">
        <p>© 2024 Mini Blog. All rights reserved.</p>
    </footer>

    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script>
        // 为热门博主列表项添加点击事件
        document.querySelectorAll('.popular-authors li').forEach(item => {
            item.addEventListener('click', function() {
                // 这里假设点击后会跳转到对应的用户主页
                // 实际URL应该根据你的路由设置来调整
                const userId = this.getAttribute('data-user-id');
                window.location.href = `/blog/user/${userId}`;
            });
        });
    </script>
</body>
</html>